<template>
  <div class="q-pa-md">
    <q-page>
    <header class="page-header row items-start">
      <q-breadcrumbs class="header-title" active-color="grey-7">
        <q-breadcrumbs-el class="first-breadcrumbs"  label="人员管理" />
        <q-breadcrumbs-el label="列表" class="text-weight-medium" />
      </q-breadcrumbs>
      <q-space />
      <q-btn unelevated color="primary" label="新建" icon="add" padding="6px 16px 6px 12px" :to="toCreateTradeUrl" />
    </header>
    <!-- 添加搜索栏 -->
    <div class="q-pa-sm row q-gutter-sm items-center">
      <q-input
        v-model="searchForm.name"
        dense
        outlined
        label="姓名"
        class="col-2"
      />
      <q-input
        v-model="searchForm.phone"
        dense
        outlined
        label="手机号"
        class="col-2"
      />
      <q-input
        v-model="searchForm.email"
        dense
        outlined
        label="邮箱"
        class="col-2"
      />
      <q-btn
        color="primary"
        icon="search"
        label="搜索"
        @click="loadData"
      />
      <q-btn
        color="grey-7"
        icon="refresh"
        label="重置"
        @click="resetSearch"
        class="q-ml-sm"
      />
    </div>
    <q-table

      :rows="dataList"
      :columns="columns"
      row-key="name"
      :pagination="pagination"
      @update:pagination="loadData"
    >
      <!-- 添加自定义无数据提示 -->
      <template v-slot:no-data="{ filter }">
        <div class="full-width row flex-center q-pa-md text-grey">
          <q-icon :name="filter ? 'search_off' : 'sentiment_dissatisfied'" size="2em" class="q-mr-sm" />
          <span>{{ filter ? '未找到匹配的数据' : '暂无员工数据' }}</span>
        </div>
      </template>

      <!-- 添加加载中提示 -->
      <template v-slot:loading>
        <q-inner-loading showing color="primary">
          <q-spinner-dots size="50px" />
        </q-inner-loading>
      </template>

    <template v-slot:body-cell-actions="props">
      <q-td :props="props" class="q-gutter-x-xs">
        <q-btn
          icon="edit"
          color="blue-8"
          dense
          @click="handleEdit(props.row)"
        />
        <q-btn
          icon="delete"
          color="red-8"
          dense
          @click="handleDelete(props.row)"
        />
      </q-td>
    </template>
    </q-table>
    </q-page>
  </div>
</template>

<script setup>
import {onMounted, reactive,  ref, computed} from 'vue'
import { useRouter } from 'vue-router';
import { api } from 'boot/axios'


const router = useRouter();

const columns = [
  { name: 'code', align: 'center', label: '编号', field: row => row.code },
  { name: 'name', align: 'center',label: '姓名', field: row => row.name },
  { name: 'gender', align: 'center',label: '性别', field: row => row.gender },
  { name: 'phone', align: 'center',label: '手机', field: row => row.phone },
  { name: 'email', align: 'center',label: '邮箱', field: row => row.email  },
  { name: 'title', align: 'center',label: '现任职位', field: row => row.title },
  { name: 'status', align: 'center',label: '状态', field: row => row.title },
  { name: 'actions', label: '操作', align: 'center' }
]


// 响应式数据声明
const dataList = ref([]);
const pagination = reactive({
  page: 1,
  rowsPerPage: 10,
  rowsNumber: 0
});

// 方法定义
// 在 script setup 中添加搜索表单数据
const searchForm = reactive({
  name: '',
  phone: '',
  email: ''
});
const loading = ref(false);

// 修改 loadData 函数
const loadData = async () => {
  loading.value = true;
  try {
    const res = await api.get('/users', {
      params: {
        page: pagination.page,
        pageSize: pagination.rowsPerPage,
        name: searchForm.name,
        phone: searchForm.phone,
        email: searchForm.email
      }
    });
    dataList.value = res.data.items;
    pagination.rowsNumber = res.data.total;
  } catch (error) {
    console.error('数据加载失败:', error);
  } finally {
    loading.value = false;
  }
};

const handleEdit = (row) => {
  console.log('编辑:', row.code);
  router.push({
    path: '/user/info', // 需要路由配置中定义 name
    query: {
      user_id: row.code
    },
  });
};

const handleDelete = (row) => {
  console.log('删除:', row.id);
};

onMounted(() => {
  // get initial data from server (1st page)
  loadData()
})

const toCreateTradeUrl = computed(()=>`/user/add`)

// 在 script setup 中添加重置方法
const resetSearch = () => {
  searchForm.name = '';
  searchForm.phone = '';
  searchForm.email = '';
  loadData();
};
</script>
<style lang="scss">
  .page-header {
    z-index: 2;
    margin: 10px;
    .header-title {
      font-size: 15px;

      .first-breadcrumbs {
        .q-breadcrumbs__el-icon {
          font-size: 140%;
          position: relative;
          top: -1px;
        }
      }
    }
  }
</style>
